<template>
  <!--图标样式-->
  <link
    rel="stylesheet"
    type="text/css"
    href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css"
  />

  <!--布局框架-->
  <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

  <!--主要样式-->
  <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />

  <div class="limiter">
    <div
      class="container-login100"
      style="background-image: url('/assets/images/img-01.jpg')"
    >
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form @submit="onReginster" class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
          </div>

          <span class="login100-form-title p-t-20 p-b-45">注册页面</span>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入手机号"
          >
            <input
              class="input100"
              type="text"
              v-model="mobile"
              placeholder="手机号"
              autocomplete="off"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入密码"
          >
            <input
              class="input100"
              type="password"
              v-model="password"
              placeholder="密码"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn">注 册</button>
          </div>

          <!-- <div class="text-center w-full p-t-25 p-b-230">
            <a href="index.html#" class="txt1">忘记密码？</a>
          </div> -->

          <div class="text-center w-full p-t-35">
            <router-link class="txt1" to="/business/base/login">
              立即登录
              <i class="fa fa-long-arrow-right"></i>
            </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import { showNotify } from "vant";

//手机号
const mobile = ref("19855611193");
//密码
const password = ref("123");

//全局代理 => this,代替全局，这里是保证登录之后，一直保持登录状态，不需要重复登录
const { proxy } = getCurrentInstance();

//判断号码是否合规
const mobileRegister = /^1[3456789]\d{9}$/;
//表单提交的事件
const onReginster = async (values) => {
  mobile.value = mobile.value.trim();
  password.value = password.value.trim();

  if (!mobile.value) {
    proxy.$NotifyWarn("请输入手机号");
    return false;
  } else if (mobileRegister.test(mobile.value) == false) {
    proxy.$NotifyWarn("手机号输入不正确");
    return false;
  } 

  if (!password.value) {
    proxy.$NotifyWarn("密码不能为空");
    return false;
  }

  //封装数据
  let data = {
    mobile: mobile.value,
    password: password.value,
  };

  let result = await proxy.$post({
    url: "business/base/register",
    params: data,
  });

  if (result.code === 1) {
    proxy.$NotifySuccess({
      msg: result.msg,
      onClose: () => {
        // 路由跳转
        proxy.$router.push('/business/base/login')
      }
    });
    return false;
  } else {
    proxy.$NotifyWarn(result.msg);

    return false;
  }
};
</script>